import React, { memo } from 'react';
import { Card, Divider, Radio } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '@/pages/Home/Home.less';
import { Pie } from '@/components/Charts';

const ProportionSales = memo(
  ({ loading, dataOfQuestionType, dataOfFeedBack }) => {
    const [legendDataOfQuestionType, setLgendDataOfQuestionType] = React.useState([]);
    const [legendDataOfFeedBack, setLegendDataOfFeedBack] = React.useState([]);
    const toCreateLegend = (data, type) => {
      switch (type) {
        case 'questionType':
          setLgendDataOfQuestionType(data);
          break;
        case 'feedBack':
          setLegendDataOfFeedBack(data);
          break;
      }
    }

    return (
      <div style={{ display: 'flex' }}>
        <div style={{ width: 'calc(100% - 240px)' }}>
          <Pie
            hasLegend={false}
            subTitle={'问题类型分布'}
            data={dataOfQuestionType}
            valueFormat={(value) => dataOfQuestionType.length === 5 ? <span dangerouslySetInnerHTML={{ __html: value }} /> : 0}
            height={200}
            lineWidth={4}
            style={{ padding: '8px 0' }}
            toCreateLegend={toCreateLegend}
            dataType={'questionType'}
          />
        </div>
        <ul style={{ position: 'relative', paddingInlineStart: 0, width: 230 }}>
          {legendDataOfQuestionType.map((item, i) => (
            <li key={item.x} style={{ margin: '5px 0' }}>
              <span
                className={styles.dot}
                style={{
                  backgroundColor: !item.checked ? '#aaa' : item.color,
                }}
              />
              <span style={{ display: 'inline-block', width: 85 }}>{item.x}</span>
              <Divider type="vertical" />
              <span>{`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}</span>
              <span style={{ position: 'absolute', right: 0 }}>{item.y}</span>
            </li>
          ))}
        </ul>
      </div>
    )
  }
);

export default ProportionSales;
